* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "sans";
}
@font-face {
font-family: "sans";
src: url(font/sans.ttf);
}
body {
background-color: #19172e;
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
overflow-x: hidden;
height: 100%;
min-height: 100vh;
}
.container {
width: 40%;
height: 500px;
margin: 3rem auto;
text-align: center;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
border-radius: 20px;
backdrop-filter: blur(20px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative
}
.container h1{
position: absolute;
top: 5px;
color: white;
font-weight: 400;
}
.selectcolrs{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: fit-content;
justify-content: center;
align-items: center;
padding: 20px 0;
}
.selectcolrs input{
width: 30%;
height: 45px;
margin: 0 5px;
outline: none;
border: none;
-webkit-appearance: none;
background-color: transparent;
cursor: pointer;
}
.selectcolrs input[type="color"]::-webkit-color-swatch{
border-radius: 10px;
border: none;
}
.buttons{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 95%;
padding: 5px 0;
height: fit-content;
}
.buttons button{
outline: none;
border: none;
width: 30px;
height: 30px;
border-radius: 5px;
margin: 4px;
transition: all 200ms ease;
cursor: pointer;
}
.active{
background-color: rgb(52, 147, 255);
}
#submit{
width: 100px;
height: 35px;
outline: none;
border: none;
margin: 20px 0;
font-size: 18px;
border-radius: 3px;
background-color: white;
cursor: pointer;
transition: all 300ms ease;
}
#submit:hover{
background-color: rgb(253, 207, 78);
}
#submit:active{
background-color: #1e8e3e;
}
.output{
width: 100%;
height: fit-content;
padding: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.output textarea{
width: 90%;
height: 60px;
outline: none;
border: none;
font-size: 16px;
border-radius: 4px;
}
.output button{
width: 100px;
height: 35px;
outline: none;
border: none;
margin: 20px 0;
font-size: 18px;
border-radius: 3px;
background-color: white;
cursor: pointer;
transition: all 300ms ease;
}
.output button:hover{
background-color: rgb(253, 207, 78);
}
.output button:active{
background-color: #1e8e3e;
}
footer {
color: white;
position: absolute;
text-align: center;
font-size: 1rem;
left: 0;
right: 0;
bottom: 0;
padding: 5px;
line-height: 3vh;
}
footer a:visited {
color: inherit;
}
@media (max-width: 800px){
.container{
width: 80%;
}
}